<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>主页面</title>
<style type="text/css">
table.gridtable {
	font-family: verdana, arial, sans-serif;
	font-size: 11px;
	color: #333333;
	border-width: 1px;
	border-color: #666666;
	border-collapse: collapse;
}

table.gridtable th {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #dedede;
}

table.gridtable td {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #ffffff;
}

tr:hover td {
	background: none;
}

tr:hover {
	background-color: none;
}

thead th {
	position: sticky;
	top: 0;
	z-index: 1;
}

table {
	border-collapse: collapse;
	width: 100%;
}

th, td {
	padding: 8px;
	text-align: left;
}

th {
	background-color: #f2f2f2;
}

#myDiv { 
	background-color: #f1f1f1;
	padding: 10px;
}
 .popup {
      width: 1000px;
      height: 700px;
      background-color: #f1f1f1;
      border: 1px solid #ccc;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .close-btn {
      position: absolute;
      top: 0;
      right: 0;
      padding: 10px;
      cursor: pointer;
      font-size: 20px;
      color: #aaa;
    }
    #main1{
    	font-size:11px;
    	font-weight: bold;
    }
</style>
<meta charset="UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/grid1.0.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts.min.js"></script>
</head> 
<body>
	
	<div style="width:100%;margin: 0 auto;height:30px;line-height: 30px;">
	  code:<input style="width:100px;" id="code"> 
	  group:<input style="width:100px;" id="group"> <button id="">添加</button> <button id ='bt2'>删除</button>
	   gn:<input style="width:100px;" id="gntext"> <button id="bt3">显示所有相关概念</button>
	    <button id="bt4">所有为正</button><button id="bt5">概念统计</button>
	</div>
    	<div style="width:100%;background: gray;margin: 0 auto;" id="main0">
		 
		
		 
	</div>
	<div style="width:100%;background: gray;margin: 0 auto;height:5500px;" id="main1">
		 
		
		 
	</div>
	 
	<div style="display: none;">
	
			 <div style="width:24%;height:400px;float:left;margin: 4px;background: white;overflow: auto;">
								
								<div style="width:95%;height:30px;border:1px;background:#B0C4DE;margin: 4px;float:left;text-align: center;line-height: 30px;">
								
								   龙头股
								</div>
								
								<div style="width:95%;height:auto;border:1px;margin: 4px;float:left;"> 
									<div style="width:30%;height:30px;border:1px;background: #E6E6FA;margin: 4px;float:left;text-align: center;line-height: 30px;">名称</div>
									<div style="width:30%;height:30px;border:1px;background: #E6E6FA;margin: 4px;float:left;text-align: center;line-height: 30px;">换手率</div>
									<div style="width:30%;height:30px;border:1px;background: #E6E6FA;margin: 4px;float:left;text-align: center;line-height: 30px;">涨跌幅</div> 
								</div>
								<div style="width:95%;height:auto;border:1px;margin: 4px;float:left;"> 
									<div style="width:30%;height:30px;border:1px;background: #E6E6FA;margin: 4px;float:left;"></div>
									<div style="width:30%;height:30px;border:1px;background: #E6E6FA;margin: 4px;float:left;"></div>
									<div style="width:30%;height:30px;border:1px;background: green;margin: 4px;float:left;text-align: center;line-height: 30px;">-8%</div> 
								</div>
								<div style="width:95%;height:auto;border:1px;margin: 4px;float:left;"> 
									<div style="width:30%;height:30px;border:1px;background: #E6E6FA;margin: 4px;float:left;"></div>
									<div style="width:30%;height:30px;border:1px;background: #E6E6FA;margin: 4px;float:left;"></div>
									<div style="width:30%;height:30px;border:1px;background: red;margin: 4px;float:left;text-align: center;line-height: 30px;">7%</div> 
								</div>
				</div>
	
	</div> 
	 
<script type="text/javascript">

(function(){
	
	
	$("#bt5").click(function(){
		$("#main0").html("");
		var list = $("div[name=ztdiv]");
		
		var arrall = [];
	 
		for (var i = 0; i < list.length; i++) { 
			//debugger;
			var text = $(list[i]).text(); 
		     arr1  =text.split("+"); 
		     for(var j=0;j<arr1.length;j++){
		    	 if(arr1[j]==""){
		    		 continue;
		    	 }
		    	 arrall.push($.trim(arr1[j]));
		     }
		}
		// console.log(arrall);
		 var countMap = {};
		 for (var i = 0; i < arrall.length; i++) {
		   var num = arrall[i];
		   if (countMap[num]) {
		     countMap[num]++;
		   } else {
		     countMap[num] = 1;
		   }
		 }
		 console.log(countMap);
	

		 var sortedCountMap = Object.entries(countMap).sort((a, b) => b[1] - a[1]);
		 var i=0;
		 for (var [num, count] of sortedCountMap) {
		     i++;
		   console.log(num + ": " + count);
		   $("#main0").append("<lable>"+num+"("+count+")"+"</lable>");
		   if(i>10){
			   break;
		   }
		 } 
		 $("#main0").children().click(function(){
			 var value = $(this).text();
			 value = value.replace(/\d+/g, '');
			 value = value.replace('(','');
			 value = value.replace(')','');
				var list = $("div[name=ztdiv]");
				for (var i = 0; i < list.length; i++) {
					var text =$(list[i]).text();
					debugger;
				    if(text.length<=0){
				    	$(list[i]).parent().hide();
				    	continue;
				    }
					if(text.indexOf(value) >=0){
						$(list[i]).parent().show();
					}else{
						$(list[i]).parent().hide();
					} 
					
				}
		 });
		
	});
	
	
	 $("#bt4").click(function(){ 
		 
		 
		var divlist = $("div[ name=zdfdiv]");
		for (var i = 0; i < divlist.length; i++) {
			var temp =$(divlist[i]).text();
			if(temp.indexOf("-")==0){
				$(divlist[i]).parent().hide();
			}
		}
		 
	  });
	 
	  $("#bt3").click(function(){ 
		 var text = $("#gntext").val();
		 
		var divlist = $("div[name=ztdiv]");
		for (var i = 0; i < divlist.length; i++) {
			var temp =$(divlist[i]).text();
			if(temp.indexOf(text) ==-1){
				$(divlist[i]).parent().hide();
			}
		}
		 
	  });
	  
	  $("#bt1").click(function(){ 
		 $.ajax({
				type : "get",
				url : "${pageContext.request.contextPath}/addLTmodel",
				dataType : 'text',
				data:{code:$("#code").val(),group:$("#group").val()},
				success : function(msg) {
					alert(msg);
					loadLT();
					//$("#myDiv").html(msg);
					//$("#mytalbe").addClass("gridtable"); 
					//tongyong();
					
				}
			});
		 
				  
	  });
	  
	  $("#bt2").click(function(){ 
			 $.ajax({
					type : "get",
					url : "${pageContext.request.contextPath}/deleteLTmodel",
					dataType : 'text',
					data:{code:$("#code").val(),group:$("#group").val()},
					success : function(msg) {
						alert(msg);
						loadLT();
						//$("#myDiv").html(msg);
						//$("#mytalbe").addClass("gridtable"); 
						//tongyong();
						
					}
				});
			 
					  
		  });
	  
	  
	  function loadLT(){ 
		  $("#main1").html("");
		  $.ajax({
				type : "get",
				url : "${pageContext.request.contextPath}/getLTmodel",
				dataType : 'json',
				data:{code:$("#code").val(),group:$("#group").val()},
				success : function(msg) { 
					
					console.log(msg);
					var lt = [];
					for (var i = 0; i < msg.length; i++) {
						var b = false;
						for(var j =0;j<lt.length;j++){
							if(lt[j] == msg[i].group1){
								b =true;
							}
						}
						if(b ==false){
							lt.push(msg[i].group1);
						}
					}
					
					for(var i=0;i<lt.length;i++){
						 $("#main1").append(`
								 <div style="width:32%;height:400px;float:left;margin: 4px;background: white;overflow: auto;" name="childrendiv" data-value='${"${lt[i]}"}'>
													<div style="width:98%;height:30px;border:1px;background:#B0C4DE;margin: 4px;float:left;text-align: center;line-height: 30px;" name='groupdiv'>													
													${"${lt[i]}"}
													</div>
													<div style="width:98%;height:auto;border:1px;margin: 2px;float:left;"> 
													<div style="width:15%;height:30px;border:1px;background: #E6E6FA;margin: 2px;float:left;text-align: center;line-height: 30px;">名称</div>
													<div style="width:8%;height:30px;border:1px;background: #E6E6FA;margin: 2px;float:left;text-align: center;line-height: 30px;">市值</div>
													<div style="width:13%;height:30px;border:1px;background: #E6E6FA;margin: 2px;float:left;text-align: center;line-height: 30px;">code</div>
													<div style="width:13%;height:30px;border:1px;background: #E6E6FA;margin: 2px;float:left;text-align: center;line-height: 30px;" >换手率</div> 
													<div style="width:13%;height:30px;border:1px;background: #E6E6FA;margin: 2px;float:left;text-align: center;line-height: 30px;">成交金额</div>
													<div style="width:13%;height:30px;border:1px;background: #E6E6FA;margin: 2px;float:left;text-align: center;line-height: 30px;">涨跌幅</div>
													<div style="width:15%;height:30px;border:1px;background: #E6E6FA;margin: 2px;float:left;text-align: center;line-height: 30px;">概念</div>
												</div>
								</div>
						`) 
						
					}
				var ltdiv = $("div[name=groupdiv]");
				
				for(var i =0;i<ltdiv.length;i++){
					var group = $(ltdiv[i]).text().replace(/\s+/g, "");
					for(var j=0;j<msg.length;j++){
						if(group == msg[j].group1){ 
							var color = "red";
							if(msg[j].zhangdiefu <0){
								color ="green";
							}
							
							$(ltdiv[i]).parent().append(` 
								<div style="width:98%;height:auto;border:1px;margin: 4px;float:left;"> 
								<div style="width:15%;height:30px;border:1px;background: #E6E6FA;margin: 2px;float:left;text-align: center;line-height: 30px;" codename='${"${msg[j].code1}"}'>${"${msg[j].name1}"}${"${msg[j].duolt}"}</div>
								<div style="width:8%;height:30px;border:1px;background: #E6E6FA;margin: 2px;float:left;text-align: center;line-height: 30px;" name="shizhi">${"${msg[j].shizhi}"}亿</div>
								<div style="width:13%;height:30px;border:1px;background: #E6E6FA;margin: 2px;float:left;text-align: center;line-height: 30px;" name="code1">${"${msg[j].code1}"}</div>
								<div style="width:13%;height:30px;border:1px;background: #E6E6FA;margin: 2px;float:left;text-align: center;line-height: 30px;" hsldiv='${"${msg[j].code1}"}'>${"${msg[j].huanshoulv}"}</div> 
								<div style="width:13%;height:30px;border:1px;background: #E6E6FA;margin: 2px;float:left;text-align: center;line-height: 30px;" name="cjje" cjjediv='${"${msg[j].code1}"}'>${"${msg[j].cjje}"}</div> 
								<div style='width:13%;height:30px;border:1px;background: ${"${color}"};margin: 2px;float:left;text-align: center;line-height: 30px;' name="zdfdiv" zdfdiv='${"${msg[j].code1}"}'>${"${msg[j].zhangdiefu}"}</div>
								<div style='width:15%;height:30px;border:1px;background: #E6E6FA;;margin: 2px;float:left;text-align: center;line-height: 30px;overflow:hidden; white-space:nowrap; text-overflow:ellipsis;' title='${"${msg[j].ztContent}"}' name="ztdiv">${"${msg[j].ztContent}"}</div> 
							</div>
							`)
						}
						
					}
				}
				
				//alert(ltdiv.length);
				

				var divs = $('#main1 div[name=childrendiv]');

			    // 根据属性的值进行排序
			    divs.sort(function (a, b) {
			      	return parseInt($(b).data('value')) - parseInt($(a).data('value'));
			    });

			    // 更新容器中的 div 元素顺序
			    $('#main1').html(divs); 
				}
 			}); 
	  }
	  
	  setInterval(() => {
		  
		  console.log("开始调用刷新");
		  var div1 = $("div[name=code1]");
		  var arr = [];
		  for(var i=0;i<div1.length;i++){
			  arr.push($(div1[i]).text());
		  }
		  
		  $.ajax({
				type : "post",
				url : "${pageContext.request.contextPath}/getCodeCcc",
				dataType : 'json',
				data:{code1:arr.toString()},
				success : function(msg) {
					 console.log(msg);
					//alert(msg);
					//loadLT();
					//$("#myDiv").html(msg);
					//$("#mytalbe").addClass("gridtable"); 
					//tongyong();
					for(var i=0;i<msg.length;i++){ 
						$("div[hsldiv="+msg[i].code1+"]").text(msg[i].huanshoulv); 
						$("div[zdfdiv="+msg[i].code1+"]").text(msg[i].zhangdiefu); 
						$("div[cjjediv="+msg[i].code1+"]").text(msg[i].cjje);  
						$("div[codename="+msg[i].code1+"]").attr("title",msg[i].shizhi+"亿");
						if(msg[i].zhangdiefu >0){
							$("div[zdfdiv="+msg[i].code1+"]").css('background-color','red');
						}else{
							$("div[zdfdiv="+msg[i].code1+"]").css('background-color','green');
						}
						if(msg[i].huanshoulv >=10){
							$("div[hsldiv="+msg[i].code1+"]").css('background-color','#6666ff');
							
						}else{
							$("div[hsldiv="+msg[i].code1+"]").css('background-color','#E6E6FA');
						}
					}
					$('div[name=cjje]').each(function() {
						  var value = parseFloat($(this).text()/10000).toFixed(2);
						  // 在这里对处理后的数值进行操作
						  $(this).text(value+"亿");
				    });
					  
					   
				}
			});  
		  
	}, 30000);
	  
	  
	  loadLT();
	
	 
})();
</script>
</body>
</html>